<template>
    <div>
        <el-tabs type="border-card" v-show="isYan" style="height: 400px">

            <!--        选时间-->
            <el-tab-pane label="查询工资">

                <!--                <el-select v-model="yearValue" placeholder="请选择">-->
                <!--                    <el-option-->
                <!--                            v-for="item in optionsY"-->
                <!--                            :key="item.yearValue"-->
                <!--                            :label="item.label"-->
                <!--                            :value="item.yearValue">-->
                <!--                    </el-option>-->
                <!--                </el-select>-->
                <!--                <span class="text">年</span>-->
                <!--                <el-select v-model="mouthValue" placeholder="请选择">-->
                <!--                    <el-option-->
                <!--                            v-for="item in optionsM"-->
                <!--                            :key="item.mouthValue"-->
                <!--                            :label="item.label"-->
                <!--                            :value="item.mouthValue"-->
                <!--                            :disabled="disabled"-->
                <!--                    >-->
                <!--                    </el-option>-->
                <!--                </el-select>-->
                <!--                <span class="text">月</span>-->
                <div class="block">
                    <span class="demonstration"> 请选择你要查询的月份：</span>
                    <el-date-picker
                            v-model="value2"
                            type="month"
                            placeholder="选择月">
                    </el-date-picker>

                    <el-button  class="btn" type="primary" @click="cha">查询</el-button>
                </div>


            </el-tab-pane>
            <!--        工资表-->
            <div class="biao" v-show="isCha">
                <el-table
                        :data="currentData"
                        border
                        style="width: 100%"
                        :cell-style="cell_style"
                        :header-cell-style="header_style"

                >
                    <!--                设置表格文字居中-->
                    <el-table-column
                            prop="number"
                            label="员工编号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="员工姓名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="storeName"
                            label="部门">
                    </el-table-column>
                    <el-table-column
                            prop="jobName"
                            label="职务"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="baseSalary"
                            label="基本工资"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="pushSalary"
                            label="绩效"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="salary"
                            label="应发工资"
                    >

                    </el-table-column>
                    <el-table-column
                            prop="fineSalary"
                            label="扣/罚款"
                    >
                    </el-table-column>

                    <el-table-column
                            prop="realSalary"
                            label="实发工资"
                    >
                        <!--                    {{shi}}-->
                        <template slot-scope="scope">
                           ￥ {{ (scope.row.realSalary = scope.row.salary-scope.row.fineSalary)
                            }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>


            <!--        弹框验证身份-->


        </el-tabs>

        <el-dialog title="身份验证" :visible.sync="dialogFormVisible" width="28%"
                   center>
            <el-form :model="form">
                <el-form-item label="" label-width="20px">
                            <span><i class="el-icon-warning jingao"></i>
                                为确保您的信息安全，查询工资之前需要验证身份，请输入密码完成验证：
                            </span>
                </el-form-item>
                <el-form-item label="" label-width="20px">
                    <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="yanzheng">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>

            </div>
        </el-dialog>
    </div>

</template>

<script>
    import axios from '../../http/http'
    import * as api from '../../http/api'

    export default {
        name: "j_cxgz",

        data() {
            return {
                value2: "",
                dialogFormVisible: false,
                form: {
                    password: '',
                },
                //假数据
                currentData: [],
                isYan: false,
                isCha: false,


            }
        },
        watch: {
            yearValue() {

                this.yearValue !== '' ? this.disabled = false : this.disabled
            }
        },
        computed: {
            // total() {
            //     return parseInt(this.base_salary) + parseInt(this.jixiao)
            // },
            // shi(){
            //    return parseInt(this.total)-this.kou
            // }

        },
        methods: {
            cha() {
                    // let date = this.value2
                    // let nowdate = new Date(date).toLocaleDateString().replace(/\//g, "-");
                  // console.log(this.value2.toUTCString())


                let cur_date = new Date();
                if(cur_date < new Date(this.value2)) {
                    this.$alert('<strong>请选择小于今天的年月!', '提示', {
                        dangerouslyUseHTMLString: true
                    });
                }else if(this.value2===''||this.value2===null){
                    this.$alert('<strong>你还没有选择查询哪个月，蠢货!', '提示', {
                        dangerouslyUseHTMLString: true
                    });
                }else {
                    axios({
                        url: api.salary,
                        method: 'post',
                        params:{
                            date:this.value2.toUTCString()
                        }
                    }).then(res => {
                        // console.log(res.data)
                        if(res.data.code===200){
                            this.currentData=[res.data.info]
                        }else if(res.data.code===400){
                            this.$alert('<strong>这个月还没有工资，请你去找老板!', '提示', {
                                dangerouslyUseHTMLString: true
                            });
                        }

                    })
                    this.isCha = true
                }

            },
            //验证密码 请求
            yanzheng() {
                this.dialogFormVisible = false
                axios({
                    url: api.password,
                    method: 'post',
                    data: {
                        password: this.form.password,
                    }
                }).then(res => {
                    // console.log(res)
                    if (res.data.code === 200) {
                        this.$message({
                            message: '验证成功',
                            type: 'success'
                        });
                        this.isYan = true
                    } else {
                        this.$message.error('验证失败，请确认是本人操作！');
                    }

                })

            },

            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            //以上方法实现表格文字居中
        },
        created() {
            this.dialogFormVisible = true
        },
        mounted() {
        }

    }


</script>

<style scoped lang="less">
    .text {
        display: inline-block;
        width: 50px;

    }
    .block{
        text-align: right;
        width:90% ;
        .btn{margin-left: 20px}


    }

    .jingao {
        color: red;
    }

    .biao {
        padding: 20px 0;

        .el-table {
            margin: 0 auto;

        }
    }

</style>